<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>jq编写的选项卡</title>
        <script src="js/jquery-1.12.4.min.js"></script>
        <style>
            #wrap div {
                width:200px;
                height:200px;
                border:1px solid #ccc;
                display:none;
            }
            .active {
                background:red;
            }
        </style>
        <script>
            /*
            window.onload = function () {
                var oDiv = document.getElementById("wrap");
                var aInt = oDiv.getElementsByTagName("input");
                var aD = oDiv.getElementsByTagName("div");
                
                for(var i=0; i<aInt.length; i++) {
                    aInt[i].index = i;
                    aInt[i].onclick = function () {
                        for(var i=0; i<aInt.length; i++) {
                            aInt[i].className = "";
                            aD[i].style.display = "none";
                        }
                        
                        this.className = "active";
                        aD[this.index].style.display = "block";
                        
                    }
                    
                }
            }
            */
            $( function () {
                $('#wrap').find('input').click( function () {
                    $('#wrap').find('input').attr('class','');
                    $('#wrap').find('div').css('display','none');
                    $(this).attr('class','active');
                    $('#wrap').find('div').eq( $(this).index() ).css('display','block');
                } )
            } )
            
        </script>
    </head>
    <body>
        <div id="wrap">
            <input type="button" value="1"/>
            <input type="button" value="2"/>
            <input type="button" value="3"/>
            <div style="display:block;">11111</div>
            <div>22222</div>
            <div>33333</div>
        </div>
    </body>
</html>













































